<template>
  <div class="line1">
    <div :id='id'
         :data='data'
         :isShow="isShow"
         style="width:80vw;height:600px;">
    </div>
    <!-- 
    <div
      style="width: 100%;height:550px;"
      class="echarts-none"
      v-else
    >
      <div>
        <img
          src="~@/assets/none.png"
          alt=""
        >
        <div class="echarts-text">
          暂无数据
        </div>
      </div>
    </div>
    <div
      :id='id'
      :data='data'
      v-show="false"
    ></div> -->

  </div>
</template>

<script>
// import { setStore, getStore } from '@/utils/common'
export default {
  data() {
    return {
      myChart: null,
      imgList: [],
      imgItem: '',
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initData(this.id, this.data)
    })
  },
  props: {
    id: {
      type: String,
      default: 'line',
    },
    data: {
      type: Object,
      default: () => {},
    },
    isShow: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    initData(id, data) {
      if (data) {
        // let _this = this
        if (this.myChart) {
          this.myChart.clear()
        }
        let moduleChart = document.getElementById(id)
        this.myChart = this.$echarts.init(moduleChart)
        // this.myChart = this.$echarts.init(moduleChart, null, { renderer: 'svg' })
        
        //deskLightRate 是页面上需要制成图片的曲线
        if (
          id.match(/(\w+?)(\d+)\b/)[1] === 'logStepOne' ||
          id.match(/(\w+?)(\d+)\b/)[1] === 'waveStepOne' ||
          id.match(/(\w+?)(\d+)\b/)[1] === 'waveRate' ||
          id.match(/(\w+?)(\d+)\b/)[1] === 'waveSingle' ||
          id.match(/(\w+?)(\d+)\b/)[1] === 'innerCharts'
          ) {
            setTimeout(() => {
              this.imgItem = this.myChart.getConnectedDataURL({
                pixelRatio: 2,  // 放大二倍下载
                backgroundColor: '#fff',
              })
              this.$emit('shotImg', this.imgItem)
            }, 1)
          }
          this.myChart.showLoading()
          this.myChart.setOption(data)
          // 设置x轴显示间隔
          this.computedInterval()
          
          // 设置拟合线宽度
          this.fittingWidth()
          
          // 去除所有线形图x轴平行线
          this.delXGrad()
          
          // 设置y轴最大最小值
          this.setMaxMin()

          this.myChart.hideLoading()
          window.removeEventListener('resize', this.resizeMyChart)
          window.addEventListener('resize', this.resizeMyChart)
      } else {
        this.myChart.showLoading()
      }
    },
    resizeMyChart() {
      this.myChart.resize()
    }, 

    // 设置y轴最大最小值
    setMaxMin() {
      const model = this.myChart.getModel()
      const maxmin = model.getComponent('yAxis').axis.scale._extent
      const yAxis = model.option.yAxis[0]
      yAxis.max = maxmin[1]
      yAxis.min = maxmin[0]
      // 添加次刻度
      yAxis.minorTick.show = true

      this.resizeMyChart()
    },
    
    // 去除所有线形图x轴平行线
    delXGrad() {
        // 逻辑代码
      const options = this.myChart.getModel().option
      const xAxis = options.xAxis[0]
      const yAxis = options.yAxis[0]
      xAxis.axisLabel = {
        ...xAxis.axisLabel,
        fontSize: 22
      },
      yAxis.axisLabel ={
        ...xAxis.axisLabel,
        fontSize: 22
      }
      // options.legend = [{...options.legend[0], fontSize: 20}]

      const Item = options.yAxis[0]
      const series = options.series[0]
      // const _this = this
      // 判断如果是线形图，那么隐藏x轴平行线
      if(series && series.type === 'line') {
        Item.splitLine.show = false
      }

      // 添加配置x，y类目轴缩放事件
      const xInside = this.myChart.getModel().getComponent('dataZoom', 0)
      const yInside = this.myChart.getModel().getComponent('dataZoom', 1);
      if(options.dataZoom.length) {
        options.dataZoom.forEach(item => {
          item.zoomOnMouseWheel = 'ctrl'
        })

        let start = 0
        let end = 0
        let diff = 0
        const _this = this
        document.onkeydown=function(event){
          const e = event || window.event || arguments.callee.caller.arguments[0];

          // dataZoom事件，监听缩放
          _this.myChart.on('dataZoom', function (param) {
            start = param.batch[0].start
            end = param.batch[0].end
            diff = end - start
          })
          if (e.keyCode == 88) {
            if(diff !== 0 && diff <= 20) { 
                  isDisable(false)
                setTimeout(() => {
                  isDisable(true)
                }, 500);
              } else {
                isDisable(true)
              }
              yInside.option.disabled = true;
          }
          // ctrl+Y
          if (e.keyCode == 89) {
              if(diff !== 0 && diff <= 20) { 
                  isDisable(false)
                setTimeout(() => {
                  isDisable(true)
                }, 1000);
              } else {
                isDisable(true)
              }
              xInside.option.disabled = true;
          }
          function isDisable(value){
            options.dataZoom.forEach(item => {
              item.zoomOnMouseWheel = value
            })
          }
        };
        document.onkeyup = function (event) {
          const e = event || window.event || arguments.callee.caller.arguments[0];
          // ctrl+X
          if (e.keyCode == 88) {
              yInside.option.disabled = false;
              isDisable(false)
          }
          // ctrl+Y
          if (e.keyCode == 89) {
              xInside.option.disabled = false;
              isDisable(false)
          }
          function isDisable(value){
            options.dataZoom.forEach(item => {
              item.zoomOnMouseWheel = value
              item.disabled = false
            })
          }
        }

      }
      this.resizeMyChart()
    },

    // 动态设置拟合线宽度
    fittingWidth() {
      const Item = this.myChart.getModel().option.series
      Item.forEach((item) => {
        // 拟合线的颜色后期可能会改
        if(item.name && item.name.indexOf('拟合') > -1 && item.itemStyle.color === '#000') {
          item.lineStyle.width = 1.8
        } else {
          if(item.type === 'bar') return
          // item.lineStyle.width = this.$WidthList[index]
        }
      })

      // x轴坐标刻度轴永远在底部
      // Item.axisLine.onZero = false

      this.resizeMyChart()
    },

    // 计算x轴数值间隔
    computedInterval() {
      // 计算次刻度的间隔
      const xAxis1 = this.myChart.getModel().option.xAxis[1]
      if(!xAxis1) return
      if(xAxis1?.data.length) {
        const xAxis1Index = Math.round((xAxis1.data.length / 6) / 5) - 1
        xAxis1.axisTick.interval = xAxis1Index
      }
      // 刻度间隔
      const Item = this.myChart.getModel().option.xAxis[0]
      if(Item.data.length >= 12) {
        const intervalIndex = Math.trunc(Item.data.length / 6)
        Item.axisLabel.interval = (index, value) => {
          if(index % intervalIndex  ===  0) {
            // 如果要是展示的数值刻度 则它刻度长度是长的
            Item.axisTick.length = 7
            return true          
          } 
        }
      }
      
      // x轴坐标刻度轴永远在底部
      Item.axisLine.onZero = false

      this.resizeMyChart()
    }
  },
  watch: {
    data: {
      handler() {
        this.$nextTick(() => {
          this.initData(this.id, this.data)
        })
      },
      deep: true,
    },
    // isShow: {
    //   handler() {
    //     this.$nextTick(() => {
    //       this.initData(this.id, this.data);
    //     });
    //   },
    //   deep: true
    // }
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.clear()
      window.removeEventListener('resize', this.resizeMyChart)
    }
  },
}
</script>

<style>
.line1 {
  display: flex;
}
.echarts-none {
  display: flex;
  justify-content: center;
  align-items: center;
}
.echarts-text {
  text-align: center;
  color: #a0a0a0;
  font-size: 16px;
}
</style>
